import {Component, OnDestroy, OnInit, AfterViewInit} from '@angular/core';
import {NbToastStatus} from '@nebular/theme/components/toastr/model';
import {NbToastrService} from '@nebular/theme';
import {HttpClient} from '@angular/common/http';
import {SERVER_URL} from '../../config';
import {ReturnData} from '../produce-find/produce-find.component';
import {NbThemeService} from '@nebular/theme';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, OnDestroy {
  pieOptions: any;
  areaOptions: any;
  themeSubscription: any;
  latestProduce: any = [];
  latestProduceName: any[] = [];
  awaitApproval: any = 0;
  producePlan: number = 0;
  dateArray: any[] = [];
  qtyAraay: any[] = [];

  constructor(private http: HttpClient,
              private toastrService: NbToastrService,
              private theme: NbThemeService) {
    this.http.get<ReturnData>(SERVER_URL + '?s=App.chart.Select2').subscribe(data => {
      if (data.data.code) {
        console.log(data.data.code);
        for (const p of data.data.code) {
          this.latestProduceName.push(p.Name);
          this.latestProduce.push({name: p.Name, value: p.Qty});
        }
        this.loadPieChart();
      }
    });
    this.http.get<ReturnData>(SERVER_URL + '?s=App.chart.Select3').subscribe(data => {
      if (data.data.code) {
        for (const p of data.data.code) {
          this.qtyAraay.push(p.Qty);
          this.dateArray.push(p.Produce_date);
          this.producePlan = this.producePlan + Number(p.Qty);
        }
        this.loadAreaChart();
      }
    });
    this.http.get<ReturnData>(SERVER_URL + '?s=App.chart.Select').subscribe(data => {
      this.awaitApproval = data.data.code;
    });
  }

  ngOnInit() {
    this.toastrService.show('欢迎回来', '提示', {status: NbToastStatus.SUCCESS});
  }

  ngOnDestroy(): void {
  }

  loadAreaChart() {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const echarts: any = config.variables.echarts;

      this.areaOptions = {
        backgroundColor: echarts.bg,
        color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: echarts.tooltipBackgroundColor,
            },
          },
        },
        legend: {
          data: ['生产总数量'],
          textStyle: {
            color: echarts.textColor,
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.dateArray,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: echarts.axisLineColor,
              },
            },
            axisLabel: {
              textStyle: {
                color: echarts.textColor,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: echarts.axisLineColor,
              },
            },
            splitLine: {
              lineStyle: {
                color: echarts.splitLineColor,
              },
            },
            axisLabel: {
              textStyle: {
                color: echarts.textColor,
              },
            },
          },
        ],
        series: [
          {
            name: '生产总数量',
            type: 'line',
            stack: 'Total amount',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: echarts.textColor,
                },
              },
            },
            areaStyle: {normal: {opacity: echarts.areaOpacity}},
            data: this.qtyAraay,
          },
        ],
      };
    });
  }

  loadPieChart() {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors = config.variables;
      const echarts: any = config.variables.echarts;

      this.pieOptions = {
        backgroundColor: echarts.bg,
        color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.latestProduce,
          textStyle: {
            color: echarts.textColor,
          },
        },
        series: [
          {
            name: '食品',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            data: this.latestProduce,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: echarts.itemHoverShadowColor,
              },
            },
            label: {
              normal: {
                textStyle: {
                  color: echarts.textColor,
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: echarts.axisLineColor,
                },
              },
            },
          },
        ],
      };
    });
  }

}
